import React from 'react'
import '../../less/index.less'
import { withRouter } from 'react-router-dom'
import { FormattedMessage } from 'react-intl'

class ShowTaskStudentCell extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      visibility: props.visibility,
      type: props.type
    }
  }

  componentWillReceiveProps (nextProps) {
    this.setState({visibility: nextProps.visibility})
  }

  changeVisible () {
    this.state.type === 'task'
          ? this.props.changeTaskVisible(!this.state.visibility, this.props.id, this.props.programId, this.props.topicId)
          : this.props.changeTopicVisible(!this.state.visibility, this.props.id, this.props.programId)
  }

  render () {
    const setStatus = this.state.visibility ? <FormattedMessage id='学员不可见' /> : <FormattedMessage id='学员可见' />
    const status = this.state.visibility ? <FormattedMessage id='可见' /> : <FormattedMessage id='不可见' />

    return (
      <span className='editable-cell'>
        {this.props.readOnly ? status
            : <a onClick={this.changeVisible.bind(this)}>{setStatus}</a>
        }
      </span>
    )
  }
}

export default withRouter(ShowTaskStudentCell)
